<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <!-- 视图层 模板 -->
    <div id="app">
        <!-- 1.文本差值语法 M -->
        {{msg}}
        <div v-html="a"></div>
        <div v-bind:title="title">块级元素</div>
        <!-- v-bind简写为： -->
        <div :title="title" v-bind="obj">块级元素</div>
    </div>
    <script>
        // 创建一个vue应用
        const { createApp, ref } = vue;
        createApp({
            // 应用的入口函数
            setup() {
                // vue变量 响应式状态
                const msg = ref('hello vue3');
                const a = ref('<a href="http://www.baidu.com">百度一下</a>');
                const title = ref('我是悬浮到标签的提示说明');
                const obj = ref({
                    id:'first',
                    class:'second',
                    style:"background-color:red"
                })
                // 将状态和方法暴露给模板
                return {
                    msg,
                    a,
                    title,
                    obj
                }
            }
        }).mount('#app')
    </script>

</body>

</html>